<template>
    <view>
        <view class="azm-tabs-right pr" @tap.stop="_onClick" v-if="type === 'custom'">
            <slot></slot>
            <view class="azm-fab-select-model" v-if="isShow">
                <view>
                    <view class="azm-sm-arrow triangle triangle-up"></view>
                    <view class="azm-sm-list">
                        <view class="azm-sm-item" v-for="(item,index) in content" :key="index" v-if="!item.hide"
                              @tap.stop="_onItemClick(index, item)">
                            <text v-if="item.text">{{ item.active?item.selectedText : item.text }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <block v-else>
            <view v-if="leftBottom||rightBottom||leftTop||rightTop" :class="{
        'uni-fab--leftBottom': leftBottom,
        'uni-fab--rightBottom': rightBottom,
        'uni-fab--leftTop': leftTop,
        'uni-fab--rightTop': rightTop
      }" class="uni-fab" :style="posStyle">
                <view :class="{
          'uni-fab__content--left': horizontal === 'left',
          'uni-fab__content--right': horizontal === 'right',
          'uni-fab__content--flexDirection': direction === 'vertical',
          'uni-fab__content--flexDirectionStart': flexDirectionStart,
          'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
		  'uni-fab__content--other-platform': !isAndroidNvue
        }"
                      :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
                      class="uni-fab__content">
                    <view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first"></view>
                    <view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }"
                          class="uni-fab__item"
                          @tap.stop="_onItemClick(index, item)">
                        <image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image"
                               mode="widthFix"/>
                        <text v-if="item.text" class="uni-fab__item-text"
                              :style="{ color: item.active ? styles.selectedColor : styles.color }">{{
                            item.active?item.selectedText : item.text }}
                        </text>
                    </view>
                    <view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first"></view>
                </view>
                <view :class="{
          'uni-fab__circle--left': horizontal === 'left' && direction === 'horizontal',
          'uni-fab__circle--top': vertical === 'top' && direction === 'vertical',
          'uni-fab__circle--bottom': vertical === 'bottom' && direction === 'vertical',
          'uni-fab__circle--right': horizontal === 'right' && direction === 'horizontal',
		  'uni-fab__plus--active': isShow,
		  'uni-fab__content--other-platform': !isAndroidNvue
        }"
                      class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor }"
                      @tap.stop="_onClick">
                    <view class="fab-circle-v"></view>
                    <view class="fab-circle-h"></view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
    import { debounce } from "@u/lodash/throttle"

    let platform = 'other';
    // #ifdef APP-NVUE
    platform = uni.getSystemInfoSync().platform
    // #endif
    export default {
        name: 'tl-fab',
        props: {
            pattern: {
                type: Object,
                default () {
                    return {}
                }
            },
            horizontal: {
                type: String,
                default: 'left'
            },
            vertical: {
                type: String,
                default: 'bottom'
            },
            direction: {
                type: String,
                default: 'horizontal'
            },
            x: Number,
            y: Number,
            content: {
                type: Array,
                default () {
                    return []
                }
            },
            show: {
                type: Boolean,
                default: false
            },
            type: String
        },
        data () {
            return {
                fabShow: false,
                isShow: false,
                isAndroidNvue: platform === 'android',
                styles: {
                    color: '#3c3e49',
                    selectedColor: '#007AFF',
                    backgroundColor: '#fff',
                    buttonColor: '#3c3e49'
                },
                posStyle: '',
                PosStyle: {
                    left: 'auto',
                    bottom: 'auto',
                    top: 'auto',
                    right: 'auto',
                    opacity: 1,
                },
                is_show: true
            }
        },
        computed: {
            contentWidth (e) {
                return (this.content.length + 1) * 55 + 10 + 'px'
            },
            contentWidthMin () {
                return 55 + 'px'
            },
            // 动态计算宽度
            boxWidth () {
                return this.getPosition(3, 'horizontal')
            },
            // 动态计算高度
            boxHeight () {
                return this.getPosition(3, 'vertical')
            },
            // 计算左下位置
            leftBottom () {
                return this.getPosition(0, 'left', 'bottom')
            },
            // 计算右下位置
            rightBottom () {
                return this.getPosition(0, 'right', 'bottom')
            },
            // 计算左上位置
            leftTop () {
                return this.getPosition(0, 'left', 'top')
            },
            rightTop () {
                return this.getPosition(0, 'right', 'top')
            },
            flexDirectionStart () {
                return this.getPosition(1, 'vertical', 'top')
            },
            flexDirectionEnd () {
                return this.getPosition(1, 'vertical', 'bottom')
            },
            horizontalLeft () {
                return this.getPosition(2, 'horizontal', 'left')
            },
            horizontalRight () {
                return this.getPosition(2, 'horizontal', 'right')
            }
        },
        watch: {
            pattern (newValue, oldValue) {
                //console.log(JSON.stringify(newValue))
                this.styles = Object.assign({}, this.styles, newValue)
            },
            PosStyle: {
                handler (n) {
                    const object2style = this.$util.object2style;
                    if (n) {
                        this.posStyle = object2style(n);
                    }
                },
                deep: true
            }
        },
        created () {
            this.isShow = this.show;
            if (this.top === 0) {
                this.fabShow = true
            }
            // 初始化样式
            this.styles = Object.assign({}, this.styles, this.pattern)
        },
        methods: {
            _onClick () {
                this.isShow = !this.isShow
            },
            $show () {
                this.PosStyle.opacity = 1;
                this.is_show = true;
            },
            $hide () {
                this.PosStyle.opacity = 0;
                this.isShow = false;
            },
            open () {
                this.isShow = true
            },
            close () {
                this.isShow = false
            },
            /**
             * 按钮点击事件
             */
            _onItemClick (index, item) {
                this.$emit('trigger', {index, item})
            },
            /**
             * 获取 位置信息
             */
            getPosition (types, paramA, paramB) {
                const vm = this;
                vm.setPosition();
                if (types === 0) {
                    return this.horizontal === paramA && this.vertical === paramB
                } else if (types === 1) {
                    return this.direction === paramA && this.vertical === paramB
                } else if (types === 2) {
                    return this.direction === paramA && this.horizontal === paramB
                } else {
                    return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
                }
            },
            // 设置定位
            setPosition: debounce(function () {
                const {isNumberOfNaN} = this.$util.jude;
                const x = this.x;
                const y = this.y;
                if (!isNumberOfNaN(x) || !isNumberOfNaN(y)) return;
                if (!this.PosStyle) this.PosStyle = {};
                if (this.leftBottom === true) {
                    if (isNumberOfNaN(x)) this.PosStyle.left = `${x}px`;
                    if (isNumberOfNaN(y)) this.PosStyle.bottom = `${y}px`;
                } else if (this.rightBottom) {
                    if (isNumberOfNaN(x)) this.PosStyle.right = `${x}px`;
                    if (isNumberOfNaN(y)) this.PosStyle.bottom = `${y}px`;
                } else if (this.leftTop) {
                    if (isNumberOfNaN(x)) this.PosStyle.left = `${x}px`;
                    if (isNumberOfNaN(y)) this.PosStyle.top = `${y}px`;
                } else {
                    if (isNumberOfNaN(x)) this.PosStyle.right = `${x}px`;
                    if (isNumberOfNaN(y)) this.PosStyle.top = `${y}px`;
                }
            }, 200)
        }
    }
</script>

<style lang="scss" scoped>
    @import '@/uni.scss';


    .fab-circle-v {
        position: absolute;
        width: 3px;
        height: 31px;
        left: 26px;
        top: 12px;
        background-color: white;
    }

    .fab-circle-h {
        position: absolute;
        width: 31px;
        height: 3px;
        left: 12px;
        top: 26px;
        background-color: white;
    }

    .uni-animation {
        transition: opacity .3s;
    }

    .uni-fab {
        position: fixed;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        z-index: 100;
        transition: left .3s, top .3s, bottom .3s, right .3s, opacity .3s;

        &__circle {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 55px;
            height: 55px;
            background-color: #3c3e49;
            border-radius: 55px;
            z-index: 11;
        }

        &__circle--left {
            left: 0;
        }

        &__circle--right {
            right: 0;
        }

        &__circle--top {
            top: 0;
        }

        &__circle--bottom {
            bottom: 0;
        }

        &__plus {
            transform: rotate(0deg);
            transition: transform 0.3s;
            font-weight: bold;
        }

        &__plus--active {
            transform: rotate(135deg);
        }

        &__content {
            /* #ifndef APP-NVUE */
            box-sizing: border-box;
            display: flex;
            /* #endif */
            flex-direction: row;
            border-radius: 55px;
            overflow: hidden;
            transition-property: width, height;
            transition-duration: 0.2s;
            width: 55px;
            border-color: #DDDDDD;
            border-width: 1*1upx;
            border-style: solid;
        }

        &__content--other-platform {
            border-width: 0px;
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
        }

        &__content--left {
            justify-content: flex-start;
        }

        &__content--right {
            justify-content: flex-end;
        }

        &__content--flexDirection {
            flex-direction: column;
            justify-content: flex-end;
        }

        &__content--flexDirectionStart {
            flex-direction: column;
            justify-content: flex-start;
        }

        &__content--flexDirectionEnd {
            flex-direction: column;
            justify-content: flex-end;
        }

        &__item {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 55px;
            height: 55px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        &__item--active {
            opacity: 1;
        }

        &__item-image {
            width: 25px;
            height: 25px;
            margin-bottom: 3px;
        }

        &__item-text {
            color: #FFFFFF;
            font-size: 12px;
        }

        &__item--first {
            width: 55px;
        }


        &--top {
            width: 30px;
            height: 30px;
            right: 15px;
            bottom: 30px;
            border-style: solid;
            border-width: 1px;
            border-color: #5989b9;
            border-radius: 5px;
            transition: opacity .3s;
            opacity: 0;
        }

        &--active {
            opacity: 1;
        }

        &--leftBottom {
            left: 15*2upx;
            bottom: 30*2upx;
        }

        &--leftTop {
            left: 15*2upx;
            top: 40*2upx;
            /* #ifdef H5 */
            top: calc(40px + var(--window-top));
            /* #endif */
        }

        &--rightBottom {
            right: 15*2upx;
            bottom: 30*2upx;
        }

        &--rightTop {
            right: 15*2upx;
            top: 40*2upx;
            /* #ifdef H5 */
            top: calc(40px + var(--window-top));
            /* #endif */
        }
    }


    .azm-fab-select-model {
        position: absolute;
        right: -50%;
        bottom: 0;
        z-index: 100;
        width: 100%;
        height: 100%;

        > view {
            position: absolute;
            right: 50%;
            top: calc(100% + 36upx);
            background: rgba(0, 0, 0, .8);
            color: #fff;
            border-radius: 4*2upx;
            z-index: 100;
        }

        .azm-sm-arrow {
            position: absolute;
            top: 0;
            right: 5*2upx;
            transform: translateY(-100%);

            &.triangle {
                display: inline-block;
                font-size: 0;
                overflow: hidden;
            }

            &.triangle:before {
                content: "";
                position: relative;
                display: inline-block;
                border: 9*2upx solid transparent;
            }

            &.triangle-up {
                top: 2px;
                border-top-left-radius: 50%;
                border-top-right-radius: 50%;
            }

            &.triangle-up:before {
                bottom: 2px;
                border-top-width: 0;
                border-bottom-width: 18*2upx;
                border-bottom-color: rgba(0, 0, 0, .8);
            }
        }

        .azm-sm-item {
            text-align: center;
            padding: 0 16*2upx;
            height: 50*2upx;
            white-space: nowrap;
            font-size: 16*2upx;
            font-weight: 400;
            line-height: 50*2upx;

            &:not(:first-child) {
                border-top: 1px solid #686868;
            }
        }
    }
</style>
